<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>弹幕 Demo</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      background:#000;
      color:#fff;
      overflow:hidden;         /* 禁止滚动 */
    }
    /* 弹幕舞台 */
    #stage{
      position:relative;
      width:100vw;
      height:100vh;
    }
    /* 单条弹幕 */
    .dm{
      position:absolute;
      white-space:nowrap;
      font-size:22px;
      line-height:1.2;
      will-change:transform;   /* 开启硬件加速 */
    }
    /* 底部输入栏 */
    #panel{
      position:fixed;
      bottom:20px;
      left:0;
      right:0;
      text-align:center;
    }
    #panel input{
      width:250px;
      padding:8px 12px;
      border:none;
      border-radius:16px;
      outline:none;
      font-size:16px;
    }
    #panel button{
      margin-left:8px;
      padding:8px 18px;
      border:none;
      border-radius:16px;
      background:#ff5c5c;
      color:#fff;
      font-size:16px;
      cursor:pointer;
    }
  </style>
</head>
<body>

<!-- 舞台 -->
<div id="stage"></div>

<!-- 输入栏 -->
<div id="panel">
  <input id="text" placeholder="说点什么？" maxlength="30"/>
  <button id="send">发射</button>
</div>

<script>
(() => {
  const stage = document.getElementById('stage');
  const input = document.getElementById('text');
  const btn   = document.getElementById('send');

  /* 随机颜色 */
  const colors = ['#fff','#ff5c5c','#00ffa2','#4da6ff','#ffcc00','#ff66cc','#9c5aff'];
  const randColor = () => colors[Math.floor(Math.random()*colors.length)];

  /* 创建一条弹幕并飞过去 */
  function shoot(text){
    const span = document.createElement('span');
    span.className = 'dm';
    span.textContent = text;
    span.style.color = randColor();
    stage.appendChild(span);

    /* 初始位置：最右边，随机高度 */
    const h = stage.clientHeight;
    span.style.left = stage.clientWidth + 'px';
    span.style.top  = Math.random()*(h-50) + 'px';

    /* 动画：从右到左，匀速 */
    const duration = 8000 + Math.random()*5000; // 8~13s
    span.style.transition = `transform ${duration}ms linear`;
    span.style.transform  = `translateX(-${stage.clientWidth + span.clientWidth}px)`;

    /* 结束后移除节点 */
    setTimeout(() => span.remove(), duration);
  }

  /* 发送按钮 & 回车键 */
  function send(){
    const txt = input.value.trim();
    if(!txt) return;
    shoot(txt);
    input.value='';
  }
  btn.addEventListener('click', send);
  input.addEventListener('keydown', e => e.key==='Enter' && send());

  /* 演示：随机刷几条 */
  const demo = ['Hello World','这是一条弹幕','233333','JavaScript 真好用','前端真好玩'];
  demo.forEach((t, i) => setTimeout(() => shoot(t), i*800));
})();
</script>

</body>
</html>